<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点操作</title>
</head>
<body>
    <button id="add">添加</button>
    <hr>
    <ul id="items">
        <li>项目1</li>
        <li>项目2</li>
    </ul>  
</body>
<script>
    let ul = document.querySelector('#items');
    let btn = document.querySelector('#add');
    btn.addEventListener('click',e => {
        let text = prompt('名称：');
        //思路1：构建一个字符串，将字符追加到文档中
        //缺点：会导致文档流重绘
       // text = `<li>${text}</li>`;

       //这是推荐方式
       //首先通过标签名创建元素节点
      let li = document.createElement('li');
      //通过节点元素的对象，修改内容，属性
      li.innerHTML =text;
      //1.将创建好的元素节点，添加到指定元素内部
      // ul.appendChild(li);

      //2.在指定元素之前添加
      let t=document.querySelector('#items li:first-child');
      ul.insertBefore(li,t);

      
        
        
    });

</script>
</html>